<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/template.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 95%; margin: auto" id="childApp">
    <div class=" mt-4  pb-4 f-b " style="font-size: 24px">
        Table elements
    </div>
    <div class="d-flex">
        <div class="col-6 p-0">
            <div class=" mt-4  " style="font-size: 24px">
                Tokens
            </div>
            <div class=" mt-4  " style="font-size: 16px">
                Status token
            </div>
            <div class="d-flex flex-column">
                <div class="col-12 p-0 mt-3">
                    <dfault-vuew>
                        <template v-slot:htm>
                            <span class="unis-status br-ra12 bg-lavender200 ft-lavender700">Schedule pick up</span>
                        </template>
                        <template v-slot:htmcode>
                            <span class="unis-status br-ra12 bg-lavender200 ft-lavender700">Schedule pick up</span>
                        </template>
                    </dfault-vuew>

                </div>

            </div>
            <div class=" mt-4  " style="font-size: 16px">
                Linked token
            </div>
            <div class="d-flex flex-column">
                <div class="col-12 p-0 mt-3">
                    <dfault-vuew>
                        <template v-slot:htm>
                            <div>
                                <button class="unis-token">Linked token</button>
                            </div>
                        </template>
                        <template v-slot:htmcode>
                            <button class="unis-token">Linked token</button>
                        </template>
                    </dfault-vuew>

                </div>

            </div>


        </div>
        <div class="col-6 p-0 ml-4">
            <div class=" mt-4  " style="font-size: 24px">
                Sort-order
            </div>
            <div class="d-flex flex-column">
                <div class="col-12 p-0 mt-3">
                    <dfault-vuew>
                        <template v-slot:htm>
                            <div class="d-flex  align-items-center " style="width: 100%">
                                <div class="col-4 d-flex  align-items-center">
                                    <button class="unis-sort-order">Date
                                        <span class="scale6"><i class=" icon-47 ml-2"></i>
                                      </span>
                                    </button>
                                </div>
                                <div class="col-4 d-flex  align-items-center">
                                    <button class="unis-sort-order">Date <span class="scale6"><i
                                            class=" icon-47 ml-2 icon-up"></i>
                                      </span>
                                    </button>
                                </div>
                            </div>
                        </template>
                        <template v-slot:htmcode>
                            <button class="unis-sort-order">Date <span class="scale6"><i class=" icon-47 ml-2"></i>
                                      </span>
                            </button>
                            <button class="unis-sort-order">Date <span class="scale6"><i
                                    class=" icon-47 ml-2 icon-up"></i>
                                      </span>
                            </button>
                        </template>
                    </dfault-vuew>
                    <dfault-vuew>
                        <template v-slot:htm>
                            <div class="d-flex flex-column">
                                <div class="d-flex  align-items-center mt-4" style="width: 100%">
                                    <div class="col-4 d-flex  align-items-center">
                                        <button class="unis-sort-order">Last modified <span class="scale8"><i
                                                class=" icon-47 ml-2"></i>
                                      </span>
                                        </button>
                                    </div>
                                    <div class="col-4 d-flex  align-items-center">
                                        <button class="unis-sort-order">Last modified <span class="scale8"><i
                                                class=" icon-47 ml-2"></i>
                                      </span>
                                        </button>
                                    </div>
                                    <div class="col-4 d-flex  align-items-center">
                                        <button class="unis-sort-order">Last modified <span class="scale8"><i
                                                class=" icon-47 icon-up ml-2"></i>
                                      </span>
                                        </button>

                                    </div>
                                </div>
                            </div>
                        </template>
                        <template v-slot:htmcode>
                            <button class="unis-sort-order">Last modified <span class="scale8"><i
                                    class=" icon-47 ml-2"></i>
                                      </span>
                            </button>
                            <button class="unis-sort-order">Last modified <span class="scale8"><i
                                    class=" icon-47 icon-up ml-2"></i>
                                      </span>
                            </button>
                        </template>
                    </dfault-vuew>
                </div>

            </div>
        </div>
    </div>
    <div class="   pt-4 " style="font-size:24px; margin-top: 60px ">
        Pagination
    </div>
    <div class=" mt-4  pt-4 " style="font-size:18px ">
        Pages One
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="col-md-6">
                <div class="unis-pager wid-100 d-flex flex-column justify-content-center">
                    <div class="paginate mb-2 d-flex flex-column justify-content-center">
                        <ul class="paginate_num d-flex justify-content-center align-items-center">
                            <li class="prev" onclick="">
                                <button class="unis-btn" :disabled="true">
                                    <i class="icon-15"></i>
                                </button>
                            </li>
                            <li v-for="page in 4" :key="page" :class="{'active':page==1}" onclick="">
                                <a>{{page}}</a>
                            </li>
                            <li class="next" onclick="">
                                <button class="unis-btn">
                                    <i class="icon-8"></i>
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="paginate d-flex align-items-center justify-content-center">
                        <div>0 - 10 of 40 orders
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-slot:htmcode>
             <pre>
                    <code class="lang-javascript html code css">
             <div class="unis-pager wid-100 d-flex flex-column justify-content-center">
                <div class="paginate mb-2 d-flex flex-column justify-content-center">
                    <ul class="paginate_num d-flex justify-content-center align-items-center">
                        <li class="prev" onclick="">
                            <button class="unis-btn" :disabled="true">
                                <i class="icon-15"></i>
                            </button>
                        </li>
                        <li v-for="page in 4" :key="page" :class="{'active':page==1}" onclick="">
                            <a>{{page}}</a>
                        </li>
                        <li class="next" onclick="">
                            <button class="unis-btn">
                                <i class="icon-8"></i>
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="paginate d-flex align-items-center justify-content-center">
                    <div>0 - 10 of 40 orders
                    </div>
                </div>
            </div>

                    </code>
                    </pre>
        </template>
    </dfault-vuew>
    <div class=" mt-4  pt-4 " style="font-size:18px ">
        Pages 100 Results
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="col-6">
                <div class="unis-pager wid-100 d-flex flex-column justify-content-center">
                    <div class="paginate mb-2 d-flex flex-column justify-content-center">
                        <ul class="paginate_num d-flex justify-content-center align-items-center">
                            <li onclick="">
                                <button class="unis-btn" :disabled="true">
                                    <div><i class="icon-15"></i></div>
                                    <div style="margin-left: -2px"><i class="icon-15"></i></div>
                                </button>
                            </li>
                            <li class="prev" onclick="">
                                <button class="unis-btn" :disabled="true">
                                    <i class="icon-15"></i>
                                </button>
                            </li>


                            <li v-for="page in 4" :key="page" :class="{'active':page==1}" onclick="">
                                <a>{{page}}</a>
                            </li>
                            <li class="next" onclick="">
                                <button class="unis-btn">
                                    <i class="icon-8"></i>
                                </button>
                            </li>

                            <li onclick="">
                                <button class="unis-btn">
                                    <div><i class="icon-8"></i></div>
                                    <div style="margin-left: -2px"><i class="icon-8"></i></div>
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="paginate d-flex align-items-center justify-content-center">
                        <div>0 - 10 of 40 orders
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-slot:htmcode>
             <pre>
                    <code class="lang-javascript html code css">
            <div class="unis-pager wid-100 d-flex flex-column justify-content-center">
                <div class="paginate mb-2 d-flex flex-column justify-content-center">
                    <ul class="paginate_num d-flex justify-content-center align-items-center">
                        <li onclick="">
                            <button class="unis-btn" :disabled="true">
                                <div><i class="icon-15"></i></div>
                                <div style="margin-left: -2px"><i class="icon-15"></i></div>
                            </button>
                        </li>
                        <li class="prev" onclick="">
                            <button class="unis-btn" :disabled="true">
                                <i class="icon-15"></i>
                            </button>
                        </li>


                        <li v-for="page in 4" :key="page" :class="{'active':page==1}" onclick="">
                            <a>{{page}}</a>
                        </li>

                        <li class="next" onclick="">
                            <button class="unis-btn">
                                <i class="icon-8"></i>
                            </button>
                        </li>

                        <li onclick="">
                            <button class="unis-btn">
                                <div><i class="icon-8"></i></div>
                                <div style="margin-left: -2px"><i class="icon-8"></i></div>
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="paginate d-flex align-items-center justify-content-center">
                    <div>0 - 10 of 40 orders
                    </div>
                </div>
            </div>

                    </code>
                    </pre>
        </template>
    </dfault-vuew>
    <div class=" mt-4  pt-4 " style="font-size:20px ">
        Pages  Two
    </div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="col-6">
                <div class="unis-pager wid-100 d-flex flex-column justify-content-center">
                    <div class="paginate mb-2 d-flex flex-column justify-content-center">
                        <ul class="paginate-sm d-flex justify-content-center align-items-center">
                            <li class="p-2">10 Results</li>
                            <li class="pr-2">Show:</li>
                            <li class="pr-3">
                                <button class="unis-select unis-dropdown h-24">
                                    10
                                    <ul>
                                        <li v-for="i in [5,10,15,20]">{{i}}</li>
                                    </ul>
                                </button>
                            </li>
                            <li class="prev" onclick="">
                                <button class="unis-btn default" :disabled="true">
                                    <i class="icon-15"></i>
                                </button>
                            </li>
                            <li onclick="">
                                <button class="suspend  unis-btn">1</button>
                            </li>
                            <li class="prev" onclick="">
                                <button class="suspend present unis-btn">2</button>
                            </li>
                            <li class="prev" onclick="">
                                <button class="suspend  unis-btn">3</button>
                            </li>
                            <li class="next" onclick="">
                                <button class="unis-btn default ">
                                    <i class="icon-8"></i>
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="unis-pager wid-100 d-flex flex-column justify-content-center">
                    <div class="paginate mb-2 d-flex flex-column justify-content-center">
                        <ul class="paginate-sm d-flex justify-content-center align-items-center">
                            <li class="p-2">10 Results</li>
                            <li class="pr-2">Show:</li>
                            <li class="pr-3">
                                <button class="unis-select unis-dropdown h-24">
                                    10
                                    <ul>
                                        <li v-for="i in [5,10,15,20]">{{i}}</li>
                                    </ul>
                                </button>
                            </li>
                            <li class="prev" onclick="">
                                <button class="unis-btn default ">
                                    <i class="icon-15"></i>
                                </button>
                            </li>
                            <li onclick="">
                                <button class="suspend  unis-btn">1...3</button>
                            </li>
                            <li class="prev" onclick="">
                                <button class="suspend present unis-btn">4</button>
                            </li>
                            <li class="prev" onclick="">
                                <button class="suspend  unis-btn">5...7</button>
                            </li>
                            <li class="next" onclick="">
                                <button class="unis-btn default ">
                                    <i class="icon-8"></i>
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </template>
        <template v-slot:htmcode>
            <div class="paginate mb-2 d-flex flex-column justify-content-center">
                <ul class="paginate-sm d-flex justify-content-center align-items-center">
                    <li class="p-2">10 Results</li>
                    <li class="pr-2">Show:</li>
                    <li class="pr-3">
                        <button class="unis-select unis-dropdown h-24">
                            10
                            <ul>
                                <li v-for="i in [5,10,15,20]">{{i}}</li>
                            </ul>
                        </button>
                    </li>
                    <li class="prev" onclick="">
                        <button class="unis-btn default" :disabled="true">
                            <i class="icon-15"></i>
                        </button>
                    </li>
                    <li onclick="">
                        <button class="suspend  unis-btn">1</button>
                    </li>
                    <li class="prev" onclick="">
                        <button class="suspend present unis-btn">2</button>
                    </li>
                    <li class="prev" onclick="">
                        <button class="suspend  unis-btn">3</button>
                    </li>
                    <li class="next" onclick="">
                        <button class="unis-btn default ">
                            <i class="icon-8"></i>
                        </button>
                    </li>
                </ul>
            </div>
            <div class="unis-pager wid-100 d-flex flex-column justify-content-center">
                <div class="paginate mb-2 d-flex flex-column justify-content-center">
                    <ul class="paginate-sm d-flex justify-content-center align-items-center">
                        <li class="p-2">10 Results</li>
                        <li class="pr-2">Show:</li>
                        <li class="pr-3">
                            <button class="unis-select unis-dropdown h-24">
                                10
                                <ul>
                                    <li v-for="i in [5,10,15,20]">{{i}}</li>
                                </ul>
                            </button>
                        </li>
                        <li class="prev" onclick="">
                            <button class="unis-btn default ">
                                <i class="icon-15"></i>
                            </button>
                        </li>
                        <li onclick="">
                            <button class="suspend  unis-btn">1...3</button>
                        </li>
                        <li class="prev" onclick="">
                            <button class="suspend present unis-btn">4</button>
                        </li>
                        <li class="prev" onclick="">
                            <button class="suspend  unis-btn">5...7</button>
                        </li>
                        <li class="next" onclick="">
                            <button class="unis-btn default ">
                                <i class="icon-8"></i>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>

        </template>
    </dfault-vuew>


    <div class=" mt-4  col p-0" style="font-size: 24px;margin-top: 80px;">
        Search
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="  mb-4" style="width: 100%">
                <div class="col-md-6 d-flex p-0 mt-4">
                    <div class="col-7 p-0">
                        <div class="unis-search-down  unis-search-compact">
                            <span>  <i class="icon-7 f-24"></i></span>
                            <input type="text" class="f-14 h-40 " placeholder="Enter A Keyword...">
                        </div>
                    </div>
                    <div class="col-5">Default search</div>
                </div>
                <div class="col-md-6 d-flex mt-4 p-0">
                    <div class="col-7 p-0">
                        <div class="unis-search-down  unis-search-compact ">
                            <span>  <i class="icon-7 f-24"></i></span>

                            <input type="text" class="f-14 h-40 " placeholder="Enter A Keyword...">
                            <span class="right cursor-p">  <i class="unis-cross unis-icon"></i></span>

                        </div>
                    </div>
                    <div class="col-5">Searching item</div>
                </div>
                <div class="col-md-6 d-flex mt-4 p-0">
                    <div class="col-7 p-0" style="margin-bottom: 420px">
                        <div class="unis-search-down unis-search-compact active">
                            <span class="left">   <i class="icon-7 f-24"></i></span>
                            <input type="text" class="f-14 h-40 " placeholder="Enter A Keyword..." class="focus">
                            <span class="right cursor-p">  <i class="unis-cross unis-icon"></i></span>
                            <ul class="br-white" style="max-height: 400px">
                                <div class="label ">Quotes</div>
                                <li>Shipment#12345</li>
                                <li class=" active ">Shipment#12345</li>
                                <li>Shipment#12345</li>
                                <li>Shipment#12345</li>
                                <li>Shipment#12345</li>
                                <li>Shipment#12345</li>

                                <div class="unis-module-disable " style="height: 10px"></div>
                                <div class="label ">Tasks</div>
                                <li>Shipment#12345</li>
                                <li>Shipment#12345</li>
                                <li>Shipment#12345</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-5">Active search</div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <div class="unis-search-down unis-search-compact">
                <span class="left">   <i class="icon-7 f-24"></i></span>
                <input type="text" class="f-14 h-40" placeholder="Enter A Keyword..." class="focus">
            </div>
            <div class="unis-search-down unis-search-compact">
                <span class="left">   <i class="icon-7 f-24"></i></span>
                <input type="text" class="f-14 h-40" placeholder="Enter A Keyword..." class="focus">
                <span class="right cursor-p">  <i class="unis-cross unis-icon"></i></span>
            </div>
            <div class="unis-search-down unis-search-compact active">
                <span class="left">   <i class="icon-7 f-24"></i></span>
                <input type="text" class="f-14 h-40 br-themePressed" placeholder="Enter A Keyword..." class="focus">
                <span class="right cursor-p">  <i class="unis-cross unis-icon"></i></span>
                <ul class="br-white" style="max-height: 400px">
                    <div class="label ">Quotes</div>
                    <li>Shipment#12345</li>
                    <li class=" active ">Shipment#12345</li>
                    <li>Shipment#12345</li>
                    <div class="partition " style="height: 10px"></div>
                    <li>Shipment#12345</li>
                    <li>Shipment#12345</li>
                    <li>Shipment#12345</li>

                    <div class="partition " style="height: 10px"></div>
                    <div class="label ">Tasks</div>
                    <li>Shipment#12345</li>
                    <li>Shipment#12345</li>
                    <li>Shipment#12345</li>
                </ul>
            </div>
        </template>
    </dfault-vuew>
    <div class="d-flex">
        <div class="col-6 p-0">
            <div class=" mt-4 mb-4 " style="font-size: 18px">
                Priority status
                <dfault-vuew>
                    <template v-slot:htm>
                        <div class="container">
                            <div class="row">
                                <div class="col-12 p-0 mb-4">
                                    <div class="unis-priority f-16 ft-red900">
                                        <div class="status">
                                            <div class="i-box bg-errorHint mr-1">
                                                <i class="icon-77 "></i>
                                            </div>
                                            Critical
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 p-0 mb-4">
                                    <div class="unis-priority f-16 ft-red900">
                                        <div class="status">
                                            <div class="i-box bg-errorHint mr-1">
                                                <i class="icon-77 "></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-slot:htmcode>
                        <div class="unis-priority f-16 ft-red900">
                            <div class="status">
                                <div class="i-box bg-errorHint mr-1">
                                    <i class="icon-77"></i>
                                </div>
                                Critical
                            </div>
                        </div>
                    </template>
                </dfault-vuew>
            </div>
        </div>
        <div class="col-6 p-0 ml-4">
            <div class=" mt-4 mb-4 " style="font-size: 18px">
                Icon error/warning
                <dfault-vuew>
                    <template v-slot:htm>
                        <div class="container">
                            <div class="row">
                                <div class="col-8 p-0 mb-4">
                                    <div class="unis-priority f-16 ft-warning">
                                        <div class="status">
                                            <div class="i-box bg-warning mr-3">
                                                <i class="icon-81 ft-white"></i>
                                            </div>
                                            Warning text
                                        </div>
                                    </div>
                                </div>
                                <div class="col-8 p-0 mb-4 d-flex">
                                    <div class="col-6 p-0">
                                        <div class="unis-priority f-16 ft-error">
                                            <div class="status">
                                                <div class="i-box bg-error mr-3">
                                                    <i class="icon-81 ft-white"></i>
                                                </div>
                                                Error text
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6 p-0">
                                        <div class="unis-priority f-16 ft-error">
                                            <div class="status">
                                                <div class="i-box mr-3">
                                                    <i class="icon-4 f-24 ft-error"></i>
                                                </div>
                                                Error text
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-8 p-0 mb-4">
                                    <div class="unis-priority f-16 ft-succeedHint">
                                        <div class="status">
                                            <div class="i-box bg-succeedHint mr-3">
                                                <i class="icon-81 ft-white"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-10 p-0 mb-4">
                                    <div class="d-flex align-items-center bg-rejected p-4 po-r"
                                         style="height: 69px; width: 70%">
                                        <div class="unis-priority f-16 ft-error">
                                            <div class="status">
                                                <div class="i-box mr-3">
                                                    <i class="icon-4 f-24 ft-error"></i>
                                                </div>
                                                Error text
                                            </div>
                                        </div>
                                      <!--  <div class="tooltip-centre centre-right">
                                            <div class="content">
                                                <div class="popoverd">
                                                    <div class="title-content  p-2 ft-warning bg-warning"
                                                         style="width: 160px;">
                                                        <span class="ft-white f-12"> Use outline error status on grey backgrounds </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>-->
                                    </div>
                                </div>
                            </div>
                        </div>

                    </template>
                    <template v-slot:htmcode>
                        <div class="unis-priority f-16 ft-warning">
                            <div class="status">
                                <div class="i-box bg-warning mr-3">
                                    <i class="icon-81 ft-white"></i>
                                </div>
                                Warning text
                            </div>
                        </div>
                        <div class="unis-priority f-16 ft-error">
                            <div class="status">
                                <div class="i-box bg-error mr-3">
                                    <i class="icon-81 ft-white"></i>
                                </div>
                                Error text
                            </div>
                        </div>
                        <div class="unis-priority f-16 ft-error">
                            <div class="status">
                                <div class="i-box mr-3">
                                    <i class="icon-4 f-24 ft-error"></i>
                                </div>
                                Error text
                            </div>
                        </div>
                        <div class="unis-priority f-16 ft-succeedHint">
                            <div class="status">
                                <div class="i-box bg-succeedHint mr-3">
                                    <i class="icon-81 ft-white"></i>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex align-items-center bg-rejected p-4 po-r"
                             style="height: 69px; width: 70%">
                            <div class="unis-priority f-16 ft-error">
                                <div class="status">
                                    <div class="i-box mr-3">
                                        <i class="icon-4 f-24 ft-error"></i>
                                    </div>
                                    Error text
                                </div>
                            </div>
                          <!--  <div class="tooltip-centre centre-right">
                                <div class="content">
                                    <div class="popoverd">
                                        <div class="title-content  p-2 ft-warning bg-warning"
                                             style="width: 160px;">
                                            <span class="ft-white f-12"> Use outline error status on grey backgrounds </span>
                                        </div>
                                    </div>
                                </div>
                            </div>-->
                        </div>
                    </template>
                </dfault-vuew>
            </div>
        </div>
    </div>
    <div style="height: 80px;">

    </div>

</div>

<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
  var components = {
    template: dfaulthtml,
    props: {
      layout: {
        default: 1,
      }
    },
    data: function () {
      return {
        idShowCode: false,
        codeHtml: ''
      }
    },
    beforeCreate(){
      pageBeforeCreate();
    },
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },
  };
  new Vue({
    el: "#childApp",
    components: {'DfaultVuew': components},
    data: function () {
      return {
        idShowCode: false
      };
    },
    computed: {},
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },

  });
</script>
<script src="../js/cods.js"></script>
</body>
</html>